<template>
    <div>
        <a href="/Add">新增</a>
        名称:<input type="type" v-model="tj.name">
        房号:
        <select v-model="tj.state">
            <option :value="null">请选择</option>
            <option :value="true">启用</option>
            <option :value="false">禁用</option>
        </select>
        <input type="button" value="查" @click="c">
        <input type="button" value="重值" @click="cz">
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>图片</td>
                    <td>状态名称</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td>{{ a.houseId }}</td>
                    <td>{{ a.houseName }}</td>
                    <td><img :src="'https://localhost:7021/'+a.img" width="50px" height="50px"></td>
                    <td>{{ a.houseTypeName }}</td>
                    <td>{{ a.iState?"启用":"禁用" }}</td>
                    <td>
                        <input type="button" value="编辑" @click="bj(a.houseId)">
                        <input type="button" value="删除" @click="del(a.houseId)">
                        <input type="button" :value="a.iState?'启用':'禁用'" @click="q(a.houseId)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const routher = useRouter();
onMounted(()=>{
    show()
})
const del=(val:any)=>{
    axios.delete("https://localhost:7021/api/House/DelHouse",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
const bj=(val:any)=>{
    routher.push({path:"/Upd",query:{id:val}})
}
const q=(val:any)=>{
    axios.get("https://localhost:7021/api/House/Hstate",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }
        else{
            alert("修改失败")
        }
    })
}
const tj=ref({
    name:'',
    state:null
})
const show=()=>{
    axios.get("https://localhost:7021/api/House/Show",{params:tj.value}).then(res=>{
        date.value=res.data;
    })
}

const date=ref([{
  "houseId": 0,
  "houseName": "",
  "img": "",
  "houseTypeId": 0,
  "houseTypeName": "",
  "iState": false
}])
const c=()=>{
    show()
}
const cz=()=>{
    tj.value={
        name:'',
        state:null
    }
    show()
}
</script>

<style scoped>

</style>